<template>
  <div>
  <a-row>
    <a-col width="1000px" class="main">
      <div id="main">
        <a-button>A</a-button>
        <a-button>B</a-button>
        <br>
        <a-button>C</a-button>
        <a-button>D</a-button>
        <br>
        <a-button>E</a-button>
        <a-button>F</a-button>
      </div>
    </a-col>
    <a-layout-content class="el_main">
      <div class="button">
        <a-button type="primary" @click="dialogVisible = true">申请作业</a-button>
        <br>
        <a-button type="primary">更换工具</a-button>
        <br>
        <a-button type="primary" @click="endjobDialog = true">结束作业</a-button>
      </div>
    </a-layout-content>
  </a-row>

  <a-modal
      title="提示"
      v-model="dialogVisible"
      width="20%">
    <span>是否增减工具？</span>
    <template #footer>
    <span class="dialog-footer">
      <a-button type="primary" @click="ok">是</a-button>
      <a-button @click="dialogVisible = false">否</a-button>
    </span>
    </template>
  </a-modal>

  <a-modal
      title="提示"
      v-model="endjobDialog"
      width="20%">
    <span>工具箱、工具、手环是否完好？</span>
    <template #footer>
    <span class="dialog-footer">
      <a-button type="primary" @click="end">是</a-button>
      <a-button @click="endjobDialog = false">否</a-button>
    </span>
    </template>
  </a-modal>
  </div>
</template>

<style>
.main {
  background-color: #d7e0ea;
}

#main .a-button {
  width: 250px;
  height: 150px;
  font-size: 18px;
  color: #c74e4e;
  background-color: rgb(89, 159, 248);
  border: 1px solid rgb(120, 120, 120);
  border-radius: 10px;
  box-sizing: border-box;
  margin: 30px 30px;
}


#main .a-button:hover {
  background-color: rgb(165, 165, 165);
  border: 1px solid rgb(120, 120, 120);
}

.el_main {
  background-color: aliceblue;
  height: 100%;
}

.button .a-button {
  width: 250px;
  height: 100px;
  margin: 50px 25px;
}
</style>

<script>

export default {
  data() {
    return {
      dialogVisible: false,
      endjobDialog: false,
    }
  },
  methods: {
    ok() {
      this.$message.info('等待初始化');
    },

    end() {
      this.$message.info('退出系统');
      this.$router.push('/');
    },
  }
};
</script>
